<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="keywords" content="Piece,统一注册平台">
    <meta name="description" content="Piece统一注册平台">
    <title>Piece | Register</title>
    <script th:inline="javascript">ctx = [[${ctx}]];</script>
    <link th:href="${ctx}+'lib/bootstrap/bootstrap.min.css'" rel="stylesheet" type="text/css"/>
    <link th:href="${ctx}+'lib/bootstrap-validator/bootstrapValidator.min.css'" rel="stylesheet" type="text/css"/>
    <link th:href="${ctx}+'lib/font-awesome/css/font-awesome.css'" rel="stylesheet" type="text/css"/>
    <link th:href="${ctx}+'css/animate.min.css'" rel="stylesheet" type="text/css"/>
    <link th:href="${ctx}+'css/style.min.css'" rel="stylesheet" type="text/css"/>
    <link th:href="${ctx}+'css/login.min.css'" rel="stylesheet" type="text/css"/>

    <!-- Icons -->
    <link rel="apple-touch-icon" type="text/html" sizes="76x76" th:href="${ctx}+'image/apple-icon.png'">
    <link rel="shortcut icon" type="text/html" sizes="96x96" th:href="${ctx}+'image/favicon.png'">

    <script type="text/javascript">
        if (window.top !== window.self) {
            window.top.location = window.location;
        }
    </script>
</head>

<body class="signin">
<div class="signinpanel">
    <div class="row">
        <div class="col-sm-8 col-sm-offset-2">
            <form id="loginForm">
                <div class="row">
                    <div class="language">
                        <a type="button" id="lan_cn_btn" class="btn btn-small btn-outline btn-link mt5" th:href="${ctx}+'authentication/register?Language=zh_CN'">中文</a>
                        <a type="button" id="lan_en_btn" class="btn btn-small btn-outline btn-link mt5" th:href="${ctx}+'authentication/register?Language=en_US'">English</a>
                        <span class="m-t-md text-center"></span>
                    </div>
                </div>
                <h2 class="text-center">[[#{view.title}]] [[#{view.register}]]</h2>
                <p class="m-t-md text-center"></p>
                <input type="hidden" name="oauthType" th:value="${user?.type}"/>
                <input type="hidden" name="code" th:value="${user?.code}"/>
                <input type="hidden" name="state" th:value="${user?.state}"/>
                <input type="hidden" name="openid" th:value="${user?.openid}"/>
                <input type="hidden" name="accessToken" th:value="${user?.token}"/>
                <input type="hidden" name="rawTokenInfo" th:value="${user?.rawTokenInfo}"/>
                <input type="hidden" name="nickname" th:value="${user?.nickname}"/>
                <input type="hidden" name="avatar" th:value="${user?.avatar}"/>
                <input type="hidden" name="rawUserInfo" th:value="${user?.rawUserInfo}"/>
                <div class="row">
                    <div class="col-xs-12 pull_left">
                        <div class="form-group">
                            <div class="col-xs-3 control-label">
                                <label th:utext="#{view.login_name}"></label>
                            </div>
                            <div class="col-xs-8">
                                <input type="text" name="uname" class="form-control" th:placeholder="#{view.login_name}" autocomplete="off"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 pull_left">
                        <div class="form-group">
                            <div class="col-xs-3 control-label">
                                <label th:utext="#{view.nick_name}"></label>
                            </div>
                            <div class="col-xs-8">
                                <input type="text" name="nname" class="form-control" th:placeholder="#{view.nick_name}" autocomplete="off" th:value="${user?.nickname}"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 pull_left">
                        <div class="form-group">
                            <div class="col-xs-3 control-label">
                                <label th:utext="#{view.email}"></label>
                            </div>
                            <div class="col-xs-8">
                                <input type="text" name="email" class="form-control" th:placeholder="#{view.email}" autocomplete="off"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 pull_left">
                        <div class="form-group">
                            <div class="col-xs-3 control-label">
                                <label th:utext="#{view.login_password}"></label>
                            </div>
                            <div class="col-xs-8">
                                <input type="password" name="pword" class="form-control" th:placeholder="#{view.login_password}" autocomplete="off"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 pull_left">
                        <div class="form-group">
                            <div class="col-xs-3 control-label">
                                <label th:utext="#{view.repassword}"></label>
                            </div>
                            <div class="col-xs-8">
                                <input type="password" name="rpword" class="form-control" th:placeholder="#{view.repassword}" autocomplete="off"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row" th:if="${needValidate == true}">
                    <div class="form-group">
                        <div class="col-xs-3 control-label">
                            <label th:utext="#{view.captcha}"></label>
                        </div>
                        <div class="col-xs-8">
                            <div class="col-xs-6" style="padding-left: 7px;">
                                <input class="form-control m-b" type="tel" name="verify" id="verify" th:placeholder="#{view.captcha}">
                            </div>
                            <div class="col-xs-6">
                                <a href="javascript:void(0);" rel="external nofollow" th:title="#{view.refresh}">
                                    <img class="code" src="" id="verifyImg"/>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <a id="loginBtn" class="btn btn-login btn-block" th:utext="#{view.register}">注册</a>
                <div class="outside-login">
                    <div class="outside-login-tit">
                        <span><a th:href="${ctx}+'authentication/login?Language='+${Language}">[[#{view.login}]]</a></span>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="signup-footer">
        <div class="pull-left">©
            <span th:utext="${@config.getApplicationOption('copyright')}"></span>&nbsp;
            <span th:utext="#{view.title}"></span>&nbsp;
            <span>All Rights Reserved</span>
        </div>
    </div>
</div>

<!-- 全局js -->
<script th:src="${ctx}+'lib/jquery/jquery.min.js?v=2.1.4'" type="text/javascript"></script>
<script th:src="${ctx}+'lib/bootstrap/bootstrap.min.js?v=3.3.5'" type="text/javascript"></script>
<!-- Bootstrap Validation -->
<script th:src="${ctx}+'lib/bootstrap-validator/bootstrapValidator.min.js'" type="text/javascript"></script>
<!-- layer -->
<script th:src="${ctx}+'lib/layer/layer.js'" type="text/javascript"></script>
<!-- crybto -->
<script th:src="${ctx}+'lib/crypto/aes.min.js'" type="text/javascript"></script>
<script th:src="${ctx}+'lib/crypto/mode-ecb.min.js'" type="text/javascript"></script>
<!-- login -->
<script th:src="${ctx}+'js/login.min.js'" type="text/javascript"></script>

<script th:inline="javascript">
    var login_bootstrapValidator;
    var authorization = [[${authorization}]];
    var needValidate = [[${needValidate}]];
    var language = [[${Language}]];
</script>
<script type="text/javascript">
    $(document).ready(function () {
        if ('en-US' === language) {
            $('#lan_en_btn').addClass('btn-success');
        } else {
            $('#lan_cn_btn').addClass('btn-success');
        }

        $('#loginForm #verifyImg').on('click', changeVerifyImg);

        $('#loginForm #loginBtn').on('click', function () {
            $('#signForm').submit();
        });

        $('#loginForm').submit(function() {
            register();
            return false;
        });

        if (needValidate) {
            $('#loginForm #verifyImg').on('click', changeVerifyImg);
            $('#verifyImg').click();
        }

        validateRule();
        $('body').keydown(keyDownLogon);
    });

    function changeVerifyImg() {
        var url = ctx + 'authentication/code/captcha?captcha_type=char&validate_code_session=' + generateSessionKey();
        $('#loginForm #verifyImg').attr('src', url);
    }

    function keyDownLogon(e) {
        if (event.keyCode == '13') {
            event.preventDefault();
            $('#loginBtn').trigger('click');
        }
    }

    // 登陆提交
    function register() {
        if (login_bootstrapValidator) {
            var bootstrapValidator = $('#loginForm').data('bootstrapValidator');
            bootstrapValidator.validate();
            if (!bootstrapValidator.isValid()) return;
        }

        var uname = $("#loginForm input[name='uname']").val();
        var nickname = $("#loginForm input[name='nname']").val();
        var email = $("#loginForm input[name='email']").val();
        var pword = $("#loginForm input[name='pword']").val();
        var verify = $("#loginForm input[name='verify']").val();
        var oauthType = $("#loginForm input[name='oauthType']").val();
        var code_ = $("#loginForm input[name='code']").val();
        var openid = $("#loginForm input[name='openid']").val();
        var accessToken = $("#loginForm input[name='accessToken']").val();
        var rawTokenInfo = $("#loginForm input[name='rawTokenInfo']").val();
        var avatar = $("#loginForm input[name='avatar']").val();
        var rawUserInfo = $("#loginForm input[name='rawUserInfo']").val();

        uname = uname.replace(/\%/g,'');
        pword = pword.replace(/\%/g,'');
        uname = uname.replace(/\</g,'');
        pword = pword.replace(/\</g,'');
        uname = uname.replace(/\>/g,'');
        pword = pword.replace(/\>/g,'');

        var authenticationInfo = Encrypt(uname + ',' + pword);

        var url = ctx + 'authentication/doRegister';
        if (oauthType) {
            url = ctx + 'oauth/social/bind_oauth/' + oauthType;
        }

        if (!authorization) {
            authorization = 'Basic cGllY2Utd2ViOnBpZWNlLXdlYg==';
        }

        $.ajax({
            url: url,
            type: 'post',
            dataType: 'json',
            data: {
                'authenticationInfo': authenticationInfo,
                'nickname' : nickname,
                'email' : email,
                'captchaCode' : verify,
                'code': code_,
                'openid': openid,
                'accessToken': accessToken,
                'rawTokenInfo': rawTokenInfo,
                'avatar': avatar,
                'rawUserInfo': rawUserInfo,
                'validate_code_session' : SSESSION_KEY
            },
            beforeSend: function() {
                $('#loginBtn').attr('disabled','disabled');
            },
            headers: {
                'Authorization': authorization
            },
            success: function(r) {
                $('#loginBtn').removeAttr('disabled');
                if (r.code == 200) {
                    var index = layer.load(1, {
                        shade: [0.1, '#fff'] //0.1透明度的白色背景
                    });
                    layer.msg(r.msg);
                    loginSuccess(r.param.url);
                } else {
                    layer.msg(r.msg);
                    $('#loginForm #verifyImg').click();
                    $('#loginForm input[name="verify"]').val('');
                }
            },
            error: function(r) {
                layer.msg(r.msg);
                $('#loginBtn').removeAttr('disabled');
                $('#loginForm #verifyImg').click();
                $('#loginForm input[name="verify"]').val('');
            }
        });
    }

    function loginSuccess(url) {
        parent.location.href = ctx + url;
    }

    function validateRule(option) {
        if (!option) {
            if (needValidate) {
                option = {
                    message: '[[#{view.not_empty}]]',
                    fields: {
                        uname: {
                            trigger: 'blur',
                            validators: {
                                notEmpty: {
                                    message: '[[#{view.entry-username}]]'
                                },
                                remote: {
                                    url: ctx + 'public/user/unique',
                                    data: function(validator) {
                                        return {
                                            loginName: $('[name="uname"]').val()
                                        };
                                    },
                                    type: 'get',
                                    threshold: 2,
                                    delay: 1000,
                                    message: '[[#{view.user.exist}]]'
                                }
                            }
                        },
                        nname: {
                            validators: {
                                notEmpty: {
                                    message: '[[#{view.not_empty}]]'
                                }
                            }
                        },
                        email: {
                            validators: {
                                notEmpty: {
                                    message: '[[#{view.not_empty}]]'
                                },
                                emailAddress: {
                                    message: '[[#{view.email.invalid}]]'
                                }
                            }
                        },
                        pword: {
                            validators: {
                                notEmpty: {
                                    message: '[[#{view.entry-password}]]'
                                },
                                regexp: {
                                    regexp: '^[a-zA-Z][a-zA-Z0-9!@#$~]{5,17}$',
                                    message: '密码要求以字母开头，长度6-18'
                                }
                            }
                        },
                        rpword: {
                            validators: {
                                notEmpty: {
                                    message: '[[#{view.entry-password}]]'
                                },
                                identical: {
                                    field: 'pword',
                                    message: '[[#{view.repassword.inconformity}]]'
                                }
                            }
                        },
                        verify: {
                            validators: {
                                notEmpty: {
                                    message: '[[#{view.entry-validatecode}]]'
                                }
                            }
                        }
                    }
                };
            } else {
                option = {
                    message: '[[#{view.not_empty}]]',
                    fields: {
                        uname: {
                            trigger: 'blur',
                            validators: {
                                notEmpty: {
                                    message: '[[#{view.entry-username}]]'
                                },
                                remote: {
                                    url: ctx + 'public/user/unique',
                                    data: function(validator) {
                                        return {
                                            loginName: $('[name="uname"]').val()
                                        };
                                    },
                                    type: 'get',
                                    threshold: 2,
                                    delay: 1000,
                                    message: '[[#{view.user.exist}]]'
                                }
                            }
                        },
                        nname: {
                            validators: {
                                notEmpty: {
                                    message: '[[#{view.not_empty}]]'
                                }
                            }
                        },
                        email: {
                            validators: {
                                notEmpty: {
                                    message: '[[#{view.not_empty}]]'
                                },
                                emailAddress: {
                                    message: '[[#{view.email.invalid}]]'
                                }
                            }
                        },
                        pword: {
                            validators: {
                                notEmpty: {
                                    message: '[[#{view.entry-password}]]'
                                },
                                regexp: {
                                    regexp: '^[a-zA-Z][a-zA-Z0-9!@#$~]{5,17}$',
                                    message: '[[#{view.password.rule}]]'
                                }
                            }
                        },
                        rpword: {
                            validators: {
                                notEmpty: {
                                    message: '[[#{view.entry-password}]]'
                                },
                                identical: {
                                    field: 'pword',
                                    message: '[[#{view.repassword.inconformity}]]'
                                }
                            }
                        }
                    }
                };
            }
        }

        login_bootstrapValidator = $('#loginForm').bootstrapValidator(option);
    }
</script>
</body>
</html>
